<template>
	<div class="f-data-select">
		<div class="f-data-ul">
			<div class="f-data-li" @click="formInput">
				<el-tag @close="handleClose(tag)" v-for="tag in tags" :key="tag.name" closable :type="tag.type">
					{{ tag.name }}
				</el-tag>
			</div>
			<div class="el-input-group__append" @click="formInput">
				<el-button type="primary" icon="el-icon-search">选择数据</el-button>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	model: {
		event: 'change',
		type: {},
		prop: 'dataModel'
	},
	name: 'f-data-select',
	props: {
		type: {
			type: String,
			required: true
		}, //  数据源类型,
		tag: {
			type: String
		}, // 有数据时,在select显示的文字,比如选择为会员admin ，则表单上显示admin
		field: {
			type: String,
			default: 'name'
		}, // 表单选中的字段名称，默认为name
		title: {
			type: String,
			default: '选择数据'
		},
		dataModel: {},
		client: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			viewModel: '',
			tags: [], // 已选的数据
			dialogFormVisible: false,
			selectText: '请选择数据',
			dataLoading: false
		}
	},
	mounted() {
		this.init()
	},
	methods: {
		async init() {
			this.setTag(this.tag)
		},
		rowSelect(data) {
			if (data) {
				this.selectText = '当前选择：' + data[this.field]
				this.setTag(data[this.field])
				this.viewModel = data.id
			}
		},
		setTag(name) {
			this.tags = []
			if (name) {
				var item = {
					name: name,
					type: ''
				}
				this.tags.push(item)
			}
		},
		handleClose(tag) {
			this.tags = []
			this.viewModel = null
		},
		afterTableLoad() {
			this.dataLoading = false
		},
		formInput() {
			this.dataLoading = true
			this.dialogFormVisible = true
			this.$nextTick(() => {
				if (this.$refs.xTable) {
					this.$refs.xTable.init(this.type)
				}
			})
		}
	},
	watch: {
		viewModel: {
			deep: true,
			handler(val) {
				this.$emit('change', this.viewModel)
			}
		}
	}
}
</script>
<style lang="scss">
.f-data-select {
  .f-data-ul{
    display: flex;
    flex-direction: row;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
  }
  .f-data-li{
    flex: 1;
    min-width: 0;
  }
	.el-input-group__append {
		width: 150px;
	}

	.cuopoin {
		cursor: pointer;
		text-align: center;
	}

	.text-placeholder {
		color: #c0c4cc;
	}

	.xtable-select {
		max-height: 50vh;
		height: 100%;
		overflow: scroll;
		margin-top: 15px;
		border-bottom: 1px solid #e5e5e5;
	}

	.xtable-select::-webkit-scrollbar {
		width: 5px;
		height: 5px;
	}

	.xtable-select::-webkit-scrollbar-thumb {
		width: 5px;
		background-color: #dcdfe6;
		border-radius: 10px;
	}

	.el-dialog__footer {
		border-top: 1px solid #eaeefb;
	}

	.selectText {
		font-size: 16px;
		font-weight: bold;
		color: #ff6a00;
		float: left;
	}
}
</style>